import React from 'react';
import { Form, Input, Button, Breadcrumb, Tabs } from 'antd';
import { withRouter } from 'react-router-dom';
import styles from './styles.module.less';
import md5 from 'js-md5';
import { connect } from 'react-redux';

import { STATUS } from './models';

class Login extends React.Component {
    state = {
      role: 'admin',
    }
    componentDidUpdate() {
        const { store, history } = this.props;
        console.log(store);
        localStorage.setItem('role',store.role)
        if (store.status === STATUS.LOGIN) {
            (store.role === '单位管理员' || store.role === '超级管理员')  && history.replace({
                pathname: '/admin',
                // search: `?role=1`
            });
            store.role === '普通用户' && history.replace({
                pathname: '/user',
                // search: `?role=user`
            });
        }
          
    }
    onFinish = (values) => {
      if (this.state.role === 'admin') {
        this.props.adminLogin(values);
      } else {
        this.props.userLogin(values)
      }
    }
    render() {
        const { userLogin, adminLogin } = this.props;
        return (
            <div className={ styles.loginBackground }>
                <div className={ styles.loginWrapper }>
                    <div className={ styles.loginContainer }>
                        <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16, offset: 4 }} onFinish={this.onFinish.bind(this)}>
                            <Form.Item>
                                <h6 className={ styles.loginHeaderTitle }>账号密码登录</h6>
                                <p className={ styles.loginHeaderSubTitle }>请保存好密码，以防被他人盗取</p>
                            </Form.Item>
                            {/* <Tabs activeKey={this.state.role} onChange={(activeKey) => this.setState({role:activeKey})}>
                              <Tabs.TabPane key={'admin'}>管理员登录</Tabs.TabPane>
                              <Tabs.TabPane key={'user'}>用户登录</Tabs.TabPane>
                            </Tabs> */}
                            {/* {this.state.role === 'admin' && (
                              <>
                                <Form.Item name='username'>
                                  <Input/>
                                </Form.Item>
                                <Form.Item>
                                  <Input />
                                </Form.Item>
                              </>
                            )} */}
                            <Form.Item name="username">
                                <Input placeholder="请输入登录账号" size="large"/>
                            </Form.Item>
                            <Form.Item name="password">
                                <Input placeholder="请输入登录密码" size="large" type="password"/>
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit" style={{marginRight:'30px'}} onClick={()=> this.setState({role: 'admin'})}>管理员登录</Button>
                                <Button type="primary" htmlType="submit" onClick={() => this.setState({ role: 'user' })}>用户登录</Button>
                            </Form.Item>
                        </Form>
                        <Breadcrumb separator="|">
                            <Breadcrumb.Item href="/#/forget">忘记密码</Breadcrumb.Item>
                            {/* <Breadcrumb.Item href="/#/register">注册新账号</Breadcrumb.Item> */}
                        </Breadcrumb>
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({ store: state.user});
const mapDispatchToProps = (dispatch) => dispatch.user;

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(Login));
